// $() jquery获取DOM节点的方法
function arrange() {
  // jquery的写法
  //获取浏览器可视窗口的高度和宽度。

  var w = $(window).width();
  var h = $(window).height();
  var centerX = w / 2;
  var centerY = h / 2;
  // .each表示遍历一个jQuery对象，为每个匹配元素执行一个函数。
  $('#xc div').each(function() {
    // 使用随机数计算元素定位的上边距，左边距 还有旋转角度 
    var left = Math.random() * centerX + centerX / 2 - 50;
    var top = Math.random() * centerY + centerY / 2 - 60;
    var rotate = Math.random() * 80 - 40;
    // 关键字 this 总是指向当前正在遍历的元素。
    $(this).css({
      // 设定元素定位的上边距值，左边距值，定位方式，旋转角度
      // 'top': top,
      // 'left': left,
      'transform': 'rotate(' + rotate + 'deg)'
    });
    $(this).animate({
      'top': top,
      'left': left,
      // 'transform': 'rotate(' + rotate + 'deg)'
    })
  });

}
// 调用并执行arrange函数一次
arrange();
// 当浏览器window的尺寸改变时，再次调用arrange
$(window).resize(arrange);

$(function() {
  // fancybox是jquery插件 是一个丰富的弹出层效果
  // 获取到一个a标签集合，启用fancybox插件
  $('#xc div a').fancybox({
    // 设置点击缩略图放大时和关闭时图片的弹性显示效果
    openEffect: 'elastic',
    closeEffect: 'elastic',
    // 禁止右上角的图片关闭按钮,若是true则开启
    closeBtn: false,
    // 启动图片自动轮播效果
    autoPlay: true,
    helpers: {
      // 显示图片上方的按钮
      buttons: {},
      // 标题显示位置
      title: { type: 'inside' },
      // 下方缩略图在切换时，缩略图集合整体保持居中，但切换的缩略图不会居中，
      // 若为false，则整体不居中，但是当前显示图片的缩略图始终居中
      thumbs: { alwaysCenter: true }
    },
    // 在打开之前，获取到图片的标题，从当前的节点中提取
    beforeLoad: function() {
      this.title = $(this.element).text();
    }
  });
})
